import React, { Component } from 'react';
import { NavBar, Icon, Tabs, Toast } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./GoodList.scss";
import emptyProduct from "../../assets/empty_product.jpg"
import myaxios from "../../utils/myaxios";
export default class GoodList extends Component {
  constructor(props) {
    super(props);
    // 列表的引用
    this.goodListRef = React.createRef();
    this.pagesize = 10; //默认每页数据数量
    this.pagenum = 1; //默认第一页
  }
  state = {
    tabs: [
      { title: "综合" },
      { title: "销量" },
      { title: "价格" },
    ],
    goods: [],
  };
  componentDidMount() {
    console.log(this.props);
    let { search } = this.props.location;
    let params = search.split("?")[1] || "";
    let params_arr = params.split("=");
    if (params_arr[0] === "cid") {
      this.cid = params_arr[1];
    } else if (params_arr[0] === "query") {
      this.query = params_arr[1];
    }
    this.getProductList();
    // 注册滚动监听事件
    this.goodListRef.current.parentElement.addEventListener("scroll", this.handleScroll
    );
  }
  handleScroll = () => {
    let parentElement = this.goodListRef.current.parentElement;
    let clientHeight = parentElement.clientHeight;    // 客户端高度
    let scrollHeight = parentElement.scrollHeight;    // 列表的高度
    let scrollTop = parentElement.scrollTop;    // 列表已经滚动的高度
    // 当结果小于等于1，已经触底    // 获取列表数据
    if (scrollHeight - scrollTop - clientHeight <= 1) {
      console.log("触底了");
      this.getProductList();
    }
  }
  componentWillUnmount() {
    // 卸载监听事件
    this.goodListRef.current.parentElement.removeEventListener("scroll", this.handleScroll);
  }
  // 获取产品列表
  getProductList = () => {
    // 拼接的参数
    let params = {};
    if (this.cid) {
      params["cid"] = this.cid;
    }
    if (this.query) {
      params["query"] = decodeURIComponent(this.query);
    }
    // 如果页码存在
    if (this.total) {
      params["pagenum"] = ++this.pagenum;
    } else {
      params["pagenum"] = this.pagenum;
    }
    // 默认页码
    params["pagesize"] = this.pagesize;
    //如果当前页码大于总页面
    if (this.pagenum > Math.ceil(this.total / this.pagesize)) {
      Toast.info("已经是最底部了")
    } else {
      myaxios
        .get("goods/search", {
          params: params,
        })
        .then((res) => {
          console.log(res);
          this.total = res.total;
          this.pagenum = res.pagenum;
          this.setState({
            goods: [...this.state.goods, ...res.goods], // 追加数据
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
  handleIetmClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id);
  }

  render() {
    return (
      <div className="yg-goodlist">
        {/* 商品列表 导航条*/}
        <div className="yg-goodlist-nav">
          <NavBar
            className="goodlist-nav"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
          >
            商品列表
          </NavBar>
          {/* 商品搜索框 */}
          <div className="yg-goodlist-search">
            <SearchInput></SearchInput>
          </div>
          {/* TAB切换栏 */}
          <div className="yg-goodlist-tab">
            <Tabs
              tabs={this.state.tabs}
              initialPage={0}
              onChange={(tab, index) => {
                console.log("onChange", index, tab);
              }}
              onTabClick={(tab, index) => {
                console.log("onTabClick", index, tab);
              }}
              tabBarUnderlineStyle={{ borderColor: "red" }}
              tabBarTextStyle={{ fontWeight: "600", color: "black" }}
            >
              <div className="goodlist-tab-zonghe" ref={this.goodListRef}>
                {this.state.goods.map((v, index) => {
                  return (
                    <div className="tab-zonghe-item" key={v.goods_id} onClick={this.handleIetmClick.bind(this, v.goods_id)}>
                      <div className="zonghe-item-left">
                        <img src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt="" />
                      </div>
                      <div className="zonghe-item-right">
                        <div className="item-right-top">
                          {v.goods_name}
                        </div>
                        <div className="item-right-bottom">
                          ￥{v.goods_price}
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  height: "150px",
                  backgroundColor: "#fff",
                }}
              >
                销量
            </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  height: "150px",
                  backgroundColor: "#fff",
                }}
              >
                价格
            </div>
            </Tabs>
          </div>
        </div>
      </div>
    )
  }
}
